<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-pre指令</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
				<h2> 当前的n 是{{n}}</h2>
				<h2> 放大10倍后的n的值是:<span v-big="n"></span></h2>
				<button type="button" @click="n++">点我n + 1</button>
			
		</div>
		<hr >
		<input type="text" v-fbind:value="n"/>
		<script type="text/javascript">
			Vue.config.productionTip = false
			new Vue({
				el:"#root",
				data:{
					n:1
				},
				directives:{
					// big 函数何时会被调用？ 1、指令与元素成功绑定时(一上来) 2、指令所在的模板被重新解析时。
					big(element,binding){
						element.innerText = binding.value * 10
					},
					fbind:{
						// 指令与元素成功绑定时
						bind(element,binding){
							element.innerText = binding.value
						},
						// 指令所在元素插入页面时
						inserted(element,binding){
							element.focus()
						},
						// 指令所在模板被重新解析时
						update(element,binding){
							element.innerText = binding.value
							element.focus()
						}
					}
					
				}
			})
		</script>
	</body>
</html>
